<template>
  <div class="toHouse">
    <div class="toHouseTop head">
      <h4>{{ title }}</h4>
    </div>
    <div class="toHouseBr"></div>
    <div class="helpFind">
      <h5>帮我找房</h5>
      <div class="helpFindInput">
        <div class="big_ipt">
          <text class="iconfont icon-tubiao09"></text>
          <input
            type="text"
            class="GoCity_ipt"
            placeholder="请输入意向城市、区域、意向楼盘"
          />
        </div>
        <div class="wrap_ipt">
          <input type="text" class="MyName_ipt" placeholder="请输入姓名" />
          <input type="text" class="MyPhone_ipt" placeholder="请输入手机号" />
        </div>
        <div class="simi_xin">
          <text class="iconfont icon-icon-"></text>
          <span class="simi_text">隐私保护已开启</span>
        </div>
        <button class="submit_btn">发布需求</button>
        <p class="today_menu">当前有148位置业顾问为您服务</p>
      </div>
    </div>
    <div class="TabBar_List">
      <div class="TabBar_Lists color_list1">
        <div class="TabBar_Lists_left">
          <h5>新房</h5>
          <p class="color1">热门新楼盘></p>
        </div>
        <div class="TabBar_Lists_right">
          <!-- e56871 -->
          <text class="iconfont icon-loufang"></text>
        </div>
      </div>
      <div class="TabBar_Lists color_list2" @click="goMap">
        <!-- 1296db -->
        <div class="TabBar_Lists_left">
          <h5>地图找房</h5>
          <p class="color2">查看附近好房源></p>
        </div>
        <div class="TabBar_Lists_right">
          <text class="iconfont icon-ditu-dibiao"></text>
        </div>
      </div>
      <div class="TabBar_Lists color_list2" @click="goSince">
        <!-- 12d38f -->
        <div class="TabBar_Lists_left">
          <h5>经纪人</h5>
          <p class="color3">优选营业顾问></p>
        </div>
        <div class="TabBar_Lists_right">
          <text class="iconfont icon-stranger-full"></text>
        </div>
      </div>
      <div class="TabBar_Lists color_list1" @click="goTosay">
        <!-- dddd57 -->
        <div class="TabBar_Lists_left">
          <h5>楼市圈</h5>
          <p class="color4">楼市最新动态></p>
        </div>
        <div class="TabBar_Lists_right">
          <text class="iconfont icon-xiaoxi"></text>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "@/components/head/index";
export default {
  components: {
    Head,
  },
  data() {
    return {
      title: "找房",
    };
  },
  onLoad() {},
  methods: {
    goMap() {
      wx.navigateTo({
        url: "../detail/mapFindHome",
      });
    },
    goSince() {
      wx.navigateTo({
        url: "../broker/index",
      });
    },
    goTosay() {
      wx.navigateTo({
        url: "../information/index",
      });
    },
  },
};
</script>

<style scoped  lang=scss>
.toHouse {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0 auto;
  list-style: none;
  position: relative;
}
.toHouseTop {
  position: sticky;
  top: 0;
}
.head {
  height: 90rpx;
  background: rgba(2, 114, 240, 1);
  padding-top: 52rpx;
  text-align: center;
  color: #fff;
}
.toHouseBr {
  width: 100%;
  height: 150rpx;
  background: linear-gradient(-180deg, rgba(2, 114, 240, 1), skyblue);
}
.helpFind {
  width: 86%;
  height: 600rpx;
  background: linear-gradient(-180deg, rgba(254, 215, 216, 1), #fff, #fff);
  position: absolute;
  left: 7%;
  top: 220rpx;
  border-radius: 50rpx;
  box-shadow: 5rpx 5rpx 5rpx gray;
  h5 {
    text-align: center;
    height: 100rpx;
    line-height: 100rpx;
    color: #ff676c;
  }
  .helpFindInput {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
  }
}
.big_ipt {
  width: 100%;
  display: flex;
  height: 100rpx;
  line-height: 100rpx;
  padding-left: 20rpx;
  .GoCity_ipt {
    margin-left: 10rpx;
    margin-top: 30rpx;
    border-bottom: 1px solid #ccc;
    width: 80%;
  }
}
.wrap_ipt {
  width: 82%;
  display: flex;
  margin-left: 48rpx;
  border-bottom: 1px solid #ccc;
  padding-bottom: 20rpx;
  .MyName_ipt {
    border-left: 1px solid #ccc;
    margin-left: 10rpx;
  }
  .MyPhone_ipt {
    border-left: 1px solid #ccc;
  }
}

.submit_btn {
  width: 93%;
  font-size: 33rpx;
  margin-top: 50rpx;
  border: 0;
  background: rgba(255, 102, 110, 1);
  color: #fff;
}

.today_menu {
  width: 90%;
  border: 1px solid rgba(255, 102, 110, 1);
  text-align: center;
  margin-left: 30rpx;
  margin-top: 50rpx;
  line-height: 50rpx;
  border-radius: 25rpx;
  color: rgba(255, 102, 110, 1);
}

@font-face {
  font-family: "iconfont"; /* Project id 2626631 */
  src: url("//at.alicdn.com/t/font_2626631_bpde1u1m0wh.woff2?t=1624361219024")
      format("woff2"),
    url("//at.alicdn.com/t/font_2626631_bpde1u1m0wh.woff?t=1624361219024")
      format("woff"),
    url("//at.alicdn.com/t/font_2626631_bpde1u1m0wh.ttf?t=1624361219024")
      format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-loufang:before {
  content: "\e64f";
  font-size: 65rpx;
  color: #f9717b;
}
.color1 {
  color: #f9717b;
}
.icon-xiaoxi:before {
  content: "\e68c";
  font-size: 65rpx;
  color: #fbd16b;
}
.color4 {
  color: #fbd16b;
}
.icon-ditu-dibiao:before {
  content: "\ec3f";
  font-size: 65rpx;
  color: #65caf7;
}
.color2 {
  color: #65caf7;
}
.icon-stranger-full:before {
  content: "\e8f3";
  font-size: 65rpx;
  color: #4acfb8;
}
.color3 {
  color: #4acfb8;
}
.icon-icon-:before {
  content: "\e604";
  margin-left: 50rpx;
}

.icon-tubiao09:before {
  content: "\e609";
}

.simi_text {
  color: #ccc;
  font-size: 25rpx;
  font-weight: bold;
}

.TabBar_List {
  width: 90%;
  height: 200rpx;
  position: absolute;
  bottom: -750rpx;
  margin-left: 5%;
  display: flex;
  flex-wrap: wrap;
}

.TabBar_Lists {
  width: 44%;
  height: 44%;
  padding-left: 15rpx;
  padding-top: 15rpx;
  margin: 1.5%;
  display: flex;
  border-radius: 15rpx;
  justify-content: space-between;
  p {
    font-size: 20rpx;
  }
  .TabBar_Lists_right {
    margin-right: 10rpx;
  }
}

.color_list1 {
  background: #f5f2eb;
}
.color_list2 {
  background: #ecf4f5;
}

/* linear-gradient(-180deg, blue, skyblue); */
</style>